<template>
  <!-- 厂商管理 -->
  <div class="filterContent">
    <a-form :model="filterForm" layout="inline">
      <a-form-item label="账号">
        <a-input
          v-model:value="filterForm.account"
          class="formInput"
          allow-clear
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="用户名">
        <a-input
          v-model:value="filterForm.username"
          class="formInput"
          allow-clear
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="账号角色">
        <a-tree-select
          v-model:value="filterForm.roleIds"
          style="width: 270px"
          :dropdown-style="{
            maxHeight: '400px',
            overflow: 'auto',
            minWidth: '300px',
          }"
          :tree-data="roleList"
          tree-checkable
          allow-clear
          :maxTagCount="1"
          :field-names="{
            label: 'name',
            value: 'id',
            children: 'childRoleList',
          }"
          :show-checked-strategy="SHOW_PARENT"
          placeholder="请选择"
          tree-node-filter-prop="label"
          @change="changeRole"
        />
      </a-form-item>
      <a-form-item label="所属部门">
        <a-tree-select
          v-model:value="filterForm.deptIds"
          style="width: 220px"
          :dropdown-style="{
            maxHeight: '400px',
            overflow: 'auto',
            minWidth: '300px',
          }"
          :tree-data="deptList"
          :maxTagCount="1"
          tree-checkable
          allow-clear
          :show-checked-strategy="SHOW_PARENT"
          :field-names="{
            label: 'name',
            value: 'id',
          }"
          placeholder="请选择"
          tree-node-filter-prop="label"
          @change="changeDept"
        />
      </a-form-item>
      <a-form-item label="状态">
        <a-select
          ref="select"
          v-model:value="filterForm.enable"
          class="formInput"
          allow-clear
          placeholder="请选择"
        >
          <a-select-option :value="1">启用</a-select-option>
          <a-select-option :value="0">禁用</a-select-option>
        </a-select>
      </a-form-item>
      <a-button type="primary" class="filterBtn" @click="handleFilter"
        >查询</a-button
      >
      <a-button type="primary" class="filterBtn greenBtn" @click="handleUser"
        >新增</a-button
      >
      <a-button
        key="submit"
        type="primary"
        :loading="syncLoading"
        danger
        @click="handleSync"
        >部门同步</a-button
      >
    </a-form>
  </div>
  <div class="tableContent">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="{ x: 'max-content' }"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'enable'">
          {{ record.enable === 1 ? "启用" : "禁用" }}
        </template>
        <template v-if="column.key === 'handle'">
          <a-button type="link" @click="handleEdit(record)">编辑</a-button>
          <a-popconfirm
            ok-text="确认"
            cancel-text="取消"
            @confirm="confirmDel(record)"
          >
            <template #title> 是否确定删除该账号? </template>
            <a-button type="link" danger>删除</a-button>
          </a-popconfirm>
          <a-popconfirm
            ok-text="确认"
            cancel-text="取消"
            @confirm="confirmHandleModelStatus(record)"
          >
            <template #title>
              {{ `是否确定${record.enable === 1 ? "停用" : "启用"}该账号？` }}
            </template>
            <a-button type="link">
              {{ record.enable === 1 ? "停用" : "启用" }}
            </a-button>
          </a-popconfirm>
          <a-button type="link" @click="resetPassWord(record)"
            >重置密码</a-button
          >
          <a-button type="link" @click="handleLog(record)">操作日志</a-button>
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getUserList"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>

  <AddUser
    :addUserVisible="addUserVisible"
    :isEdit="isEdit"
    :rowData="rowData"
    @update:addUserVisible="addUserVisible = $event"
    @getUserList="handleFilter"
  />

  <ResetPassWord
    :rowData="rowData"
    :resetPassWordVisible="resetPassWordVisible"
    @update:resetPassWordVisible="resetPassWordVisible = $event"
    @getUserList="handleFilter"
  />

  <UserLog
    :rowData="rowData"
    :userLogVisible="userLogVisible"
    @update:userLogVisible="userLogVisible = $event"
  />
</template>
<script setup>


import AddUser from "./conpoments/addUser.vue";
import ResetPassWord from "./conpoments/resetPassWord.vue";
import UserLog from "./conpoments/userLog.vue";

const $api = inject("$api");
const filterForm = ref({
  account: null,
  username: null,
  roleIds: undefined,
  deptIds: undefined,
  enable: null,
  size: 10,
  current: 1,
});
const total = ref();
const resetPassWordVisible = ref(false);

const addCompanyVisible = ref(false);
const tableData = ref([]);
const isEdit = ref(false);
const rowData = ref({});
const tableLoading = ref(false);
const addUserVisible = ref(false);
const userLogVisible = ref(false);
const syncLoading = ref(false);
const roleList = ref([]);
const deptList = ref([]);
const columns = ref([
  {
    title: "账号",
    dataIndex: "account",
    key: "account",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "用户名",
    dataIndex: "username",
    key: "username",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "电话",
    dataIndex: "phone",
    key: "phone",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "enable",
    key: "enable",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "账号角色",
    dataIndex: "roleNameStr",
    key: "roleNameStr",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "所属部门",
    dataIndex: "deptNameStr",
    key: "deptNameStr",
    width: 160,
    resizable: true,
    align: "center",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 280,
    resizable: true,
    align: "center",
    fixed: "right",
  },
]);
function handleResizeColumn(w, col) {
  col.width = w;
}
const confirmDel = async (data) => {
  const res = await $api.userDel(data.id);
  if (res && res.code === 0) {
    message.success("删除成功");
    getUserList();
  }
};
const handleUser = () => {
  isEdit.value = false;
  addUserVisible.value = true;
};
const handleEdit = async (data) => {
  rowData.value = data;
  isEdit.value = true;
  addUserVisible.value = true;
};
const resetPassWord = async (data) => {
  rowData.value = data;
  resetPassWordVisible.value = true;
};
const handleLog = async (data) => {
  userLogVisible.value = true;
};
const handleSync = async () => {
  syncLoading.value = true;
  const res = await $api.userSync();
  syncLoading.value = false;
  if (res && res.code === 0) {
    message.success("同步成功");
  }
};
const getUserList = async () => {
  const { current, size, ...rest } = filterForm.value;
  const params = {
    ...rest,
    roleIds: roleSelectedOptions.value,
    deptIds: deptSelectedOptions.value,
  };
  const res = await $api.userList(params, current, size);
  if (res && res.code === 0) {
    tableData.value = res.data.records;
    total.value = res.data.total;
  }
};
const confirmHandleModelStatus = async (data) => {
  const params = {
    id: data.id,
    enable: data.enable === 1 ? 0 : 1,
  };
  const res = await $api.userUpdate(params, "put");
  if (res && res.code === 0) {
    message.success("状态更新成功");
    getUserList();
  }
};
const getRoleListAll = async () => {
  const res = await $api.roleListAll();
  if (res.code === 0) {
    roleList.value = res.data;
  }
};
const roleSelectedOptions = ref([]);
const changeRole = (val) => {
  roleSelectedOptions.value = val;
};
const getDeptTree = async () => {
  const res = await $api.deptTree();
  if (res.code === 0) {
    deptList.value = res.data;
  }
};
const deptSelectedOptions = ref([]);
const changeDept = (val) => {
  deptSelectedOptions.value = val;
};
const handleFilter = () => {
  filterForm.value.current = 1;
  filterForm.value.size = 10;
  getUserList();
}
onMounted(async () => {
  getUserList();
  getRoleListAll();
  getDeptTree();
});
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.formInput {
  width: 155px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
</style>